@font-face {
    font-family: digit;
    src: url('digital-7_mono.ttf') format("truetype");
}
html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font:normal 12px/1.5 'Microsoft YaHei','Î¢ÈíÑÅºÚ';
    color:#333;
}

.iconfont{
    font-family:"iconfont";
    font-size:23px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
}

.scL {float:left;}
.scR {float:right;}
.scC {clear:both;}

a {
    text-decoration:none;
    color:#333;
}

ul {
    padding:0;
}
li {
    list-style:none;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    font:normal 12px/1.5 'Microsoft YaHei','Î¢ÈíÑÅºÚ';
    color:#333;
}
input,   select, textarea {
    font:normal 12px/1.5 'Microsoft YaHei','Î¢ÈíÑÅºÚ';
}
textarea {
    resize: none;
}
body {
    overflow: hidden;
}
.picture {
    position: relative;
    overflow: auto;
    height: 100%;
    background: #f6fafd;
    border:1px solid #e5ebf1;
    -webkit-user-select:none;
}
.picture .base {
    position: absolute;
}
.picture .cell {
    position: absolute;
    z-index: 100 ;
}
.picture .label {
    color: #999;
    text-align: center;
}
.picture .infoWindow {
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    /*
    border: 1px #ddd solid;*/
    border-radius: 5px;
}
.picture .cvideo {
    width: 200px;
    height: 200px;
    background: #333;
    /*
    border: 1px #ddd solid;*/
    border-radius: 5px;
}
.picture .val {
    background: #e3f0fc;
    color: #3083eb;
    width: 60px;
    text-align: center;
}
.picture .btn {
    background: #3083eb;
    color: #fff;
    cursor: pointer;
    border-radius:5px;
    padding: 3px 10px;
    font-size: 14px;
}
.picture .flow {
    width: 50px;
    height: 20px;
    background: url("sc/sys/img/picture/waterLeft.gif") center;
}
.picture .pump {
    width: 25px;
    height: 25px;
    background: url("sc/sys/img/picture/pumpOn.gif") center no-repeat;
    background-size: 100% 100%;
}
.picture .water {
    background: #fff;
    width: 5px;
    height: 80px;
}
.picture .water .w {
    width: 100%;
    height: 40%;
    background: #2e92e8;
    position: absolute;
    bottom: 0;
}
.picture .status {
    width: 50px;
    height: 50px;
    background: green;
    color:#fff;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
}
.picture .framedlg {
    color: #3083eb;
}
.picture .frame {
    background:  url("sc/sys/img/picture/gridbg.png");
}
.picture .active {
    border: 1px #3083eb solid;
}



/*控制功能*/
.control {
 /*   width: 220px;
    color: #384463;
    font-size: 14px;
    background: #ededed;
    border:1px solid #a0a0a0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;*/
}
.control .cells {
    padding: 5px;
    height: 100%;
     margin-left: 10px;
}
.control .cell {
    width: 25px;
    height: 25px;
    float: left;
    padding: 5px;
    border: 1px #ededed solid;
    cursor: pointer;
    font-size: 12px; background: no-repeat center;
}
.control .cell:hover {
    /* border: 1px #bbb dotted;*/
}
.control .cells .active {
    background-color: #bedaf1;
    border: 1px #93cbf9 solid;
}
.control .cells .active:hover {
    border: 1px #93cbf9 solid;
}

.model, .iptModel {
    display: none;
}
/*sctop*/
.sctop{width: 100%; height: 45px; background: #ededed; position: absolute; z-index: 2000; border-bottom: 1px solid #ccc; box-shadow: 0 0 5px #ccc}
.fl{float: left}
.sctop .fl{ padding-left:30px; line-height: 45px; }
.sctop input{ width: 60px; margin-left: 5px; border:1px solid #ccc; margin-right: 10px; }
.sctop .fr{ float: right; }
.sctop button{ color:#fff; margin-right: 5px; text-align: center; border-radius:5px; height: 30px; line-height: 30px; width: 60px; border:none; margin-top:8px; }
.sctop .sli{float: left;}
.sctop .line{float: left; margin-top: 7px; margin-right: 10px}
.stool{ position: absolute; z-index: 3000; top:60px; right: 5px; width: 210px;   height: auto; }
.stool .tooli{ border-radius: 5px;width: 185px; box-shadow: 0 0 5px #ccc; border:1px solid #bbb; margin-left:3px; margin-bottom: 6px; }
.stool .tooli .tit{width:100%; height: 25px; border-bottom: 1px solid #bbb; line-height: 25px; text-indent: 15px; color: #000; background: url(../image/titbg.png);}
.stool .tooli .toolcontent{ padding: 10px; }
.stool ul.layui-tab-title li{min-width: 40px;}
.stool .layui-input{ height: 34px; }
.stool .layui-form-label{width: 60px; padding: 5px 10px}
.stool .layui-input-block{margin-left:80px; margin-right: 5px}
.lefttool .cell{ position: relative; width: 30px;height: 30px; padding: 3px; margin: 5px; margin-top: 0; text-align: center }
.lefttool .cell img{width:auto;height:30px;max-height: 100%; max-width: 100%; }
.lefttool .cell .more{ width: 4px;height: 4px; position: absolute;z-index: 2000;right: 0;top:24px; }
.lefttool .cell .more img{ width: 4px;height: 4px; }
.lefttool .cell .stylemore{position: absolute; z-index: 3000; padding:10px;border:1px solid #bbb; box-shadow: 0 0 5px #ccc; background: #fff;left: 5px;top:30px; }
.lefttool .cell .stylemore img{margin:3px 10px; width: 30px;float: left}


.header{ width: 100%;background: #ededed; height: 50px;border-bottom: 1px solid #ccc;box-shadow: 0 1px 3px rgba(18,18,18,.1); }
.htit{color: #0084ff;width:240px;float: left; line-height: 60px; text-indent: 10px;font-size: 18px; font-weight: 600}
/*.header .lefttool .cell{margin-top: 5px; margin-right: 10px; text-align: center;width: 25px; height: 25px;box-shadow: 0 0 2px #ccc;float: left}
.header .lefttool .cell img{width: auto;height: auto;max-height: 100%; max-width: 100%;}*/
.imageStyle{background: none}
.hsave{float: right;margin:7px 10px;}
.chcolor{ float: right; }
.chcolor .layui-colorpicker{ width: 18px; height: 18px; line-height: 18px }
#eidtContent{ width: calc(100% - 270px); height: calc(100% - 60px);background: #f1f1f1; position: relative; margin-left: 50px;margin-top: 10px}
.content{ width: calc(100% - 270px); height: calc(100% - 60px); }
.disno{ display: none }
.stool .layui-tab-content{height:100%;overflow-y:auto;}
.content .indiv{position: absolute;left:48%; top:48%;display: block;cursor: pointer; z-index: 100;line-height: 24px;border: 1px solid rgba(0,0,0,0)}
.content .active{ border: 1px solid #0084ff }
.content .infoWindow {
    width: 100px;    height: 100px;    background: #f0f0f0;     border-radius: 5px;
}
.content .dls {
    width: 100px;    height: 100px; background: url("/image/graph/dls.png");
}
.content .yj2dgd {
    width: 120px;  height: 18px; background: url("/image/graph/p2dgd.png") repeat-x;
}
.content  .text{ height:20px;line-height: 20px;}
.content .val{background: #e3f0fc;color: #3083eb; text-align: center;padding: 5px}
.content .btn{vertical-align: middle;text-align: center;color: #fff;background: #0084ff}
.content .scbtn{vertical-align: middle;text-align: center;color: #fff;background: #0084ff; padding: 5px 10px;}
.content .cflow{ width: 120px; height: 15px;}
/*.content .cflow .colcflow{width: 100%;height: 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(-20px);}to {transform:translateX(0px);}}%3C/style%3E%3Cpath fill='none' stroke='%230084ff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E") !important;
    background-position: 0 100% !important;
    background-size: auto 6px !important;
    background-repeat: repeat;
    text-decoration: none;
}
.content .flowopen{width: 100%;height: 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(-20px);}to {transform:translateX(0px);}}%3C/style%3E%3Cpath fill='none' stroke='%230084ff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E") !important;
    background-position: 0 100% !important;
    background-size: auto 6px !important;
    background-repeat: repeat;
    text-decoration: none;
    transform: rotate(0deg);
}*/
.radius5{border-radius:5px; }
.radius10{border-radius:10px; }
.radius15{border-radius:15px; }
.radius20{border-radius:20px; }
.radius25{border-radius:25px; }
.radius30{border-radius:30px; }
.radius50{border-radius:50%; }
.radius010{border-radius:100%; }

.content .pump{ width: 30px; height: 30px; }
.content .pump img{ width: 100%; height: 100%; }
.rotate{ animation:turn 1s linear infinite;  }
@keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
.content .cwater{ border:none; background: #fff;height: 100px; width: 20px;  vertical-align: bottom;  text-indent: 3px;     }
.content .cwater div{height: 50%; background:url(/image/graph/cwaterbg.png) center top;  position: absolute;z-index: 900;bottom: 0;display: block;width: 100%;display: block}
.content .cwater label{position: absolute;z-index: 1000;right: 3px;display: block;text-align: right; padding-right:5px;background: rgb(255,255,255,0.7)}
.content .cwater h4{position: absolute;z-index: 1002; }
.content .cwater label.maxLabel{top: 3px;color:#000;font-size:14px;line-height: 25px;}
.content .cwater label.minLabel{bottom:0px;color: #000;font-size:14px;line-height: 25px;}
.content .cwater label.curLabel{bottom: 50%;color: #000;font-size:14px;line-height: 25px;margin-bottom: -15px;}
.content .cwater div .stagezdy{display: none;width: 100%;height: 100%}
.content .cwatercolor div .stagezdy{display: block;width: 100%;height: 100%}
.stage010{}
.content .stage010 label.maxLabel{display: none}
.content .stage010 label.minLabel{display: none}

.content  .cstatus{color: #fff; line-height: 30px; width: 30px; height: 30px; border-radius: 50%; background: #1ce634; text-align: center;}
.content  .touming{width: 200px;height: 80px; border-radius:5px;}

.layer{position: absolute; z-index: 10000; background: #fff; width: 160px; top:70px; height: auto;border:1px solid #ccc;right:215px;}
.layer .tit{width:100%;height: 25px; line-height: 25px; text-indent: 15px;}
.layer_Content{ padding:5px  0; max-height:530px; overflow: auto; }
.layer_Content .layerli{ cursor: pointer; width: 100%; height: 26px; line-height: 26px;text-indent: 45px; white-space: nowrap;overflow: hidden; text-overflow:ellipsis;   background: url(../image/graph/layerbg.png) no-repeat 5px center; color: #333; border-bottom: 1px solid #ccc; }
.layer_Content .current{  color: #fff;background: #0075ff url(../image/graph/layerbg.png) no-repeat 5px center; }
.layerfoot{ width: 100%; height: 25px; background: #f1f1f1;line-height: 25px;  }
.layerfoot .layerdel{ float: right;display: block;cursor:pointer;margin-right: 5px; }
.layerfoot .layerdel:hover{color: #c30}
.layercount{ text-indent: 5px; }

.stylemore img{width: 30px;height: 30px; margin: 3px 5px; }
.stylemore img:hover{opacity: 0.7;background: rgb(0,0,0,0.1)}
.stylemore{display: none}
.stylemore .stylemore-li{box-shadow: 0 0 3px #999;padding: 5px;background: #f1f1f1;margin-bottom: 10px;}
.stylemore .stylemore-li h5{font-size: 14px;padding-left: 5px;font-weight: 600}
.controlstyle  .layui-btn-sm{margin-top: 5px ; margin-bottom: 5px;}
.tdt-control-copyright{display: none}
.vertical-text{-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr; padding-left: 10px}
.lineh100{line-height: 100%}

.valueStyle011{}
.valueStyle011 .valuetit{display: none}
.valueStyle010{}
.valueStyle010 .valuetit{display: none}
.valueStyle010 .valueunit{display: none}
.valueStyle010 .valuenum{float:none; }
.valueStyle010 .valuenum .flexcenter{display: flex;flex-wrap: wrap;justify-content:center;}

.valueStyle110{}
.valueStyle110 .valueunit{display: none}
.valueStyle1{background: #1a3194;line-height: 40px; line-height: 40px;}
.valueStyle1 .valuetit{font-size: 12px;color: #FFFFFF}
.valueStyle1 .valueunit{font-size: 12px;color: #FFFFFF}
.valueStyle2{}


.valuetit{float: left; padding-left: 5px;}
.valueunit{float: right;padding-right: 5px;}
.valuenum{float: right;padding-right:3px;  }
.valuenum span{display: block;border: none;margin: 0;padding: 0;}
.value00{ line-height: 30px; font-size: 14px;background:url(../image/graph/val00.png) no-repeat center center;  text-align: center;color: #6adef0; }
.value00 label{color: #FFFFFF}
.value00 .valueleft{float:left;width:5px;height:30px;background:url(../image/graph/val00.png) no-repeat left center;}
.value00 .valueright{float:right;width:5px;height:30px;background:url(../image/graph/val00.png) no-repeat right center;}
.value0  .valuenum{color: rgb(0, 255, 23);}
.value20{  }
.value20 label{line-height: 30px}
.value20 .valuetit{width: 100%; text-align: center; background: #fff;color: #1a3194;padding-left: 0;box-shadow: 0 0 2px #ccc}
.value20 .valueleft{display: none}
.value20 .valueright{display: none}
.value20  .valuenum{float: left;padding-left: 5px;color: rgb(0, 255, 23); }

.valueOpacity2{ background: #666 }
.valueOpacity2 label{line-height: 30px}
.valueOpacity2 .valuetit{width: 100%; text-align: center;  padding-left: 0;box-shadow: 0 0 2px #ccc}
.valueOpacity2 .valueleft{display: none}
.valueOpacity2 .valueright{display: none}
.valueOpacity2  .valuenum{float: left;padding-left: 5px;}

.valueOpacity110{}
.valueOpacity110 .valueunit{display: none}
.valueOpacity010{}
.valueOpacity010  .valueunit{display: none}
.valueOpacity010  .valuetit{display: none}
.valueOpacity011{}
.valueOpacity011 .valuetit{display: none}




.value0{background: #666}
 

.value01{ line-height: 60px; background:  url(../image/graph/val01.png) no-repeat center center;  }
.value01 label{color: #00e1ff;  line-height: 60px; font-size: 16px;}
.value01 .valueleft{float:left;width:25px;height:60px;display:block;background:url(../image/graph/val01.png) no-repeat left center;}
.value01 .valueright{float:right;width:25px;height:60px;display:block;background:url(../image/graph/val01.png) no-repeat right center;}

.value21{ line-height: 60px; background:  url(../image/graph/val01.png) no-repeat center center;  }
.value21 label{color: #00e1ff;  line-height: 60px; font-size: 16px;}
.value21 .valueleft{float:left;width:25px;height:60px;display:block;background:url(../image/graph/val01.png) no-repeat left center;}
.value21 .valueright{float:right;width:25px;height:60px;display:block;background:url(../image/graph/val01.png) no-repeat right center;}
.value21 .valuetit{position: absolute;width: 100%;left: 0;top: -60px;  padding-left: 0}
.value21  .valuenum{float: left}


.value02{ line-height: 20px; font-size: 14px;background:url(../image/graph/val02.png) no-repeat left top;   text-align: center}
.value02 label{color: #FFFFFF}
.value02 .valuetit{}
.value02 .valueunit{}
.value02  .valuenum{   font-weight: 600}

.value22{ line-height: 25px; background:url(../image/graph/val02.png) no-repeat left top;  }
.value22 label{color: #FFFFFF;line-height: 25px}
.value22 .valuetit{ width: 100%;  padding-left: 0;border-bottom: 1px dotted #bbb}
.value22 .valueunit{padding-right: 5px}
.value22  .valuenum{ float: left;  font-weight: 600;padding-left: 5px;}


.value03{ line-height: 20px;background:rgb(0,15,105,0.7);border: 2px solid #3399ff}
.value03{  background:  url(../image/graph/val03.png) no-repeat center center; }
.value03 label{  color:#fff;  line-height: 50px;  }
.value03 .valueleft{float:left;width:25px;height:50px;display:block;background:url(../image/graph/val03.png) no-repeat left center;}
.value03 .valueright{float:right;width:25px;height:50px;display:block;background:url(../image/graph/val03.png) no-repeat right center;}
.value03 .valuenum{font-weight: 600}


.value23{ line-height: 20px; background:rgb(0,15,105,0.7);border: 2px solid #3399ff}
.value23{  background:  url(../image/graph/val03.png) no-repeat center center; }
.value23 label{  color:#fff;  line-height: 50px; font-size: 14px; }
.value23 .valueleft{float:left;width:25px;height:50px;display:block;background:url(../image/graph/val03.png) no-repeat left center;}
.value23 .valueright{float:right;width:25px;height:50px;display:block;background:url(../image/graph/val03.png) no-repeat right center;}
.value23 .valuenum{font-weight: 600;float: left;padding-left: 5px;}
.value23 .valuetit{position: absolute;width: 100%;left: 0;top: -30px; padding-left: 0;background:#000;color: #fff;line-height: 30px;}

.value04{ line-height: 20px; background:url(../image/graph/val04.png) no-repeat left top; text-align: center}
.value04 label{   color: #FFFFFF}
.value04  .valuenum{  font-weight: 600}
.value24{ line-height: 20px; background:url(../image/graph/val04.png) no-repeat left top;  }
.value24 label{   color: #FFFFFF}
.value24  .valuenum{  font-weight: 600;float: left;padding-left: 5px; }
.value24 .valuetit{float: left; width: 100%; font-weight: 600;padding-left: 0px;border-bottom: 1px solid #bbb}
.value24  .valueunit{ line-height:30px}
.FlowObject .rowcflow{width: 100%;height: 100%; }
.ch10 .rowcflow{width: 100%;height: 10%;}
.ch20 .rowcflow{width: 100%;height: 20%;}
.ch30 .rowcflow{width: 100%;height: 30%;}
.ch40 .rowcflow{width: 100%;height: 40%;}
.ch50 .rowcflow{width: 100%;height: 50%;}
.ch60 .rowcflow{width: 100%;height: 60%;}
.ch70 .rowcflow{width: 100%;height: 70%;}
.ch80 .rowcflow{width: 100%;height: 80%;}
.ch90 .rowcflow{width: 100%;height: 90%;}
.cw10 .rowcflow{width: 10%;height: 100%;}
.cw20 .rowcflow{width: 20%;height: 100%;}
.cw30 .rowcflow{width: 30%;height: 100%;}
.cw40 .rowcflow{width: 40%;height: 100%;}
.cw50 .rowcflow{width: 50%;height: 100%;}
.cw60 .rowcflow{width: 60%;height: 100%;}
.cw70 .rowcflow{width: 70%;height: 100%;}
.cw80 .rowcflow{width: 80%;height: 100%;}
.cw90 .rowcflow{width: 90%;height: 100%;}


.monitorContent .FlowObject .rowcflow{display: none}
.monitorContent .flowopen .rowcflow{display: block}
.flowup .rowcflow{background:  url(../image/graph/water-u.gif)  repeat-y center top; }
.flowdown .rowcflow{background:  url(../image/graph/water-d.gif)  repeat-y center top; }
.flowleft .rowcflow{background:  url(../image/graph/water-l.gif)  repeat-x left center; }
.flowright .rowcflow{background:  url(../image/graph/water-r.gif)  repeat-x left center; }

.flowup1 .rowcflow{background:  url(../image/graph/water-u1.gif)  repeat-y center top; }
.flowdown1 .rowcflow{background:  url(../image/graph/water-d1.gif)  repeat-y center top; }
.flowleft1 .rowcflow{background:  url(../image/graph/water-l1.gif)  repeat-x left center; }
.flowright1 .rowcflow{background:  url(../image/graph/water-r1.gif)  repeat-x left center; }

.flowup2 .rowcflow{background:  url(../image/graph/water-u2.gif)  repeat-y center top; }
.flowdown2 .rowcflow{background:  url(../image/graph/water-d2.gif)  repeat-y center top; }
.flowleft2 .rowcflow{background:  url(../image/graph/water-l2.gif)  repeat-x left center; }
.flowright2 .rowcflow{background:  url(../image/graph/water-r2.gif)  repeat-x left center; }

.flowup3 .rowcflow{background:  url(../image/graph/water-u3.gif)  repeat-y center top; }
.flowdown3 .rowcflow{background:  url(../image/graph/water-d3.gif)  repeat-y center top; }
.flowleft3 .rowcflow{background:  url(../image/graph/water-l3.gif)  repeat-x left center; }
.flowright3 .rowcflow{background:  url(../image/graph/water-r3.gif)  repeat-x left center; }

.flowup4 .rowcflow{background:  url(../image/graph/water-u4.gif)  repeat-y center top; }
.flowdown4 .rowcflow{background:  url(../image/graph/water-d4.gif)  repeat-y center top; }
.flowleft4 .rowcflow{background:  url(../image/graph/water-l4.gif)  repeat-x left center; }
.flowright4 .rowcflow{background:  url(../image/graph/water-r4.gif)  repeat-x left center; }

.airup .rowcflow{background:  url(../image/graph/air-u.gif)  repeat-y center top; }
.airdown .rowcflow{background:  url(../image/graph/air-d.gif)  repeat-y center top; }
.airleft .rowcflow{background:  url(../image/graph/air-l.gif)  repeat-x left center; }
.airright .rowcflow{background:  url(../image/graph/air-r.gif)  repeat-x left center; }

.gr-flowup .rowcflow{background:  url(../image/graph/water-gr-u.gif)  repeat-y center top; }
.gr-flowdown .rowcflow{background:  url(../image/graph/water-gr-d.gif)  repeat-y center top; }
.gr-flowleft .rowcflow{background:  url(../image/graph/water-gr-l.gif)  repeat-x left center; }
.gr-flowright .rowcflow{background:  url(../image/graph/water-gr-r.gif)  repeat-x left center; }

/*渐变水流*/
.lanup .rowcflow{background:  url(../image/graph/lanup.gif)  repeat-y center top; }
.landown .rowcflow{background:  url(../image/graph/landown.gif)  repeat-y center top; }
.lanleft .rowcflow{background:  url(../image/graph/lanleft.gif)  repeat-x left center; }
.lanright .rowcflow{background:  url(../image/graph/lanright.gif)  repeat-x left center; }

.redup .rowcflow{background:  url(../image/graph/redup.gif)  repeat-y center top; }
.reddown .rowcflow{background:  url(../image/graph/reddown.gif)  repeat-y center top; }
.redleft .rowcflow{background:  url(../image/graph/redleft.gif)  repeat-x left center; }
.redright .rowcflow{background:  url(../image/graph/redright.gif)  repeat-x left center; }

.wuup .rowcflow{background:  url(../image/graph/wuup.gif)  repeat-y center top; }
.wudown .rowcflow{background:  url(../image/graph/wudown.gif)  repeat-y center top; }
.wuleft .rowcflow{background:  url(../image/graph/wuleft.gif)  repeat-x left center; }
.wuright .rowcflow{background:  url(../image/graph/wuright.gif)  repeat-x left center; }

.lvup .rowcflow{background:  url(../image/graph/lvup.gif)  repeat-y center top; }
.lvdown .rowcflow{background:  url(../image/graph/lvdown.gif)  repeat-y center top; }
.lvleft .rowcflow{background:  url(../image/graph/lvleft.gif)  repeat-x left center; }
.lvright .rowcflow{background:  url(../image/graph/lvright.gif)  repeat-x left center; }


.statusStyle .statusText{background: #c30;border-radius: 50%;width: 100%;height: 100%}
.statusStyleOpen .statusText{background: #1bb717;border-radius: 50%;width: 100%;height: 100%}
.statusStyle2 .statusText{background: #c30;border-radius:5px;width: 100%;height: 100%}
.statusStyle2Open .statusText{background: #1bb717;border-radius:5px;width: 100%;height: 100%}

.statusStyle3 .statusText{background: url(../image/graph/statusStyle3.png) no-repeat;   background-size:100% 100%;  width: 100%;height: 100%;border-radius:50%}
.statusStyle3Open .statusText{background: url(../image/graph/statusStyle3Open.png) no-repeat;   background-size:100% 100%;  width: 100%;height: 100%;border-radius:50%}
.statusStyle4 .statusText{background: url(../image/graph/statusStyle4.png) no-repeat;   background-size:100% 100%;  border-radius:5px;width: 100%;height: 100%;border-radius:5%;box-shadow: 0 0 5px #444}
.statusStyle4Open .statusText{background: url(../image/graph/statusStyle4Open.png) no-repeat; background-size:100% 100%;border-radius:5px;width: 100%;height: 100%;border-radius:5%;box-shadow: 0 0 5px #444}


.statusStyle11 .statusText{background: #1bb717;border-radius: 50%;width: 100%;height: 100%}
.statusStyle11Open .statusText{background: #c30;border-radius: 50%;width: 100%;height: 100%}
.statusStyle21 .statusText{background: #1bb717;border-radius:5px;width: 100%;height: 100%}
.statusStyle21Open .statusText{background: #c30;border-radius:5px;width: 100%;height: 100%}

.statusStyle31 .statusText{background: url(../image/graph/statusStyle3Open.png) no-repeat;   background-size:100% 100%;  width: 100%;height: 100%;border-radius:50%}
.statusStyle31Open .statusText{background: url(../image/graph/statusStyle3.png) no-repeat;   background-size:100% 100%;  width: 100%;height: 100%;border-radius:50%}
.statusStyle41 .statusText{background: url(../image/graph/statusStyle4Open.png) no-repeat;   background-size:100% 100%;  border-radius:5px;width: 100%;height: 100%;border-radius:5%;box-shadow: 0 0 5px #444}
.statusStyle41Open .statusText{background: url(../image/graph/statusStyle4.png) no-repeat; background-size:100% 100%;border-radius:5px;width: 100%;height: 100%;border-radius:5%;box-shadow: 0 0 5px #444}


.ButtonObject div.layui-btn{width: 100%;height: 100%;float: left;padding: 0;text-align: center}
.ButtonObject div.layui-btn-primary{background: #fff}
.layui-form-item{margin-bottom: 10px}
.menuStyle1,.menuStyle2 {  line-height: 30px; text-indent: 10px;}
.menuStyle1  .graph-menuicon{background:rgb(255,255,255,0.8) url("../image/graph/menuico0.png") no-repeat center center;box-shadow: 1px 1px 5px #888888;  }
.menuStyle1  .graph-menubt{ color: #fff; background:rgb(111,111,111,1); width: 100%;line-height: 40px; font-weight: 600;}
.menuStyle1 div{background:rgb(255,255,255,0.9); text-align: left;box-shadow: 1px 1px 5px #888888;}
.menuStyle1 a{ color: #333;    line-height: 2.5;  padding-left: 20px;  }
.menuStyle1 a.span,.menuStyle2 a.span{ text-indent: 20px;}
.menuStyle1 a:hover li{color:#fff;}
.menuStyle1 li:hover{background:rgb(111,111,111,1); }

.menuStyle2  .graph-menuicon{background:rgb(0,0,0,0.5) url("../image/graph/menuico01.png") no-repeat center center ;box-shadow: 1px 1px 5px #888888; }
.menuStyle2  .graph-menubt{ color: #fff; background:rgb(0,0,0,1); width: 100%;line-height: 40px; font-weight: 600;   }
.menuStyle2 div{background:rgb(0,0,0,0.8);text-align: left;box-shadow: 1px 1px 5px #888888;}
.menuStyle2 a{ color: #fff;   line-height: 2.5;  padding-left: 20px;   }
.menuStyle2 a:hover li{color:#000;}
.menuStyle2 li:hover{background:rgb(255,255,255,1); }
.fontb{font-weight: bold}


.levelText{width: 100%; height: 100%;background-color:RGB(150,150,150,1);}
.levelText2{background: #ffb800}
.levelStyle1 .levelText1{background: #1bb717}
.levelStyle1 .levelText3{background: #ff5722}
.levelStyle2 .levelText1{background: #ff5722}
.levelStyle2 .levelText3{background: #1bb717}
#bunch{padding-bottom: 10px;  }
#bunch  tr td div{font-size: 16px; line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;height: 30px}

.valadd{width: 30px;position: absolute;z-index: 100;font-size: 18px;line-height: 32px;height:32px;font-weight: 600;cursor: pointer;text-align: center;background: #eee; color: #333;}
.valadd:hover{opacity: 0.8}
.layui-colorpicker.layui-colorpicker-xs{height: 21px;width: 21px}

.paneltit{width: 100%;height: 30px;line-height: 30px;background:#333333;text-indent: 5px; }
.panelStyle .paneltit{display: none}
.panelStyle2{overflow: hidden}
.panelcrow{content: "";width: 0;height: 0;border: 30px solid;position: absolute; border-color:transparent}
.panelStyle_left .panelcrow{top: 20px;right: -60px;}
.panelStyle_right .panelcrow{top: 20px;left: -60px;}
.panelStyle_top .panelcrow{bottom: -60px;right: 20px;}
.panelStyle_bottom .panelcrow{top: -60px;right: 20px;}
.panelStyle2_left .panelcrow{bottom: 20px;right: -60px;}
.panelStyle2_right .panelcrow{bottom: 20px;left: -60px;}
.panelStyle2_top .panelcrow{bottom: -60px;left: 20px;}
.panelStyle2_bottom .panelcrow{top: -60px;left: 20px;}
.flow-h3 .rowcflow{height: 3px;}
.flow-w3 .rowcflow{width: 3px;}
.flow-h4 .rowcflow{height: 4px;}
.flow-w4 .rowcflow{width: 4px;}
.flow-h5 .rowcflow{height: 5px;}
.flow-w5 .rowcflow{width: 5px;}
.flow-h6 .rowcflow{height: 6px;}
.flow-w6 .rowcflow{width: 6px;}
.flow-h8 .rowcflow{height: 8px;}
.flow-w8 .rowcflow{width: 8px;}
.flow-h2 .rowcflow{height: 2px;}
.flow-w2 .rowcflow{width: 2px;}
.chartTitVal{display: none}
.chartVal .chartTitVal{display: inline}